import React from "react";
import Select from 'antd/lib/select';
import Form from 'antd/lib/form';
import Button from 'antd/lib/button';
import Col from 'antd/lib/col';
import Row from 'antd/lib/row';
import Input from 'antd/lib/input';
import notification from "@/services/notification";
import {get} from "lodash";
import Uploads from "@/services/uploads";
import 'antd/dist/antd.less'
import moment from "moment";
import { currentUser } from "@/services/auth";
import Attaches from "@/services/attaches";
import {StarOutlined, UploadOutlined} from '@ant-design/icons';
import Upload from "antd/lib/upload";
import Enums from "@/services/enums";

export default class EmployeeChangeTable extends React.Component {
  state = {
    loading: true,
    id: 0,//
    userid: currentUser.id,//--操作员ID
    bill_date: moment(),//--日期
    code: "",//----编号
    name: "",//--名称
    major:[],//毕业专业
    area:"",//地区
    mobile:"",//手机号
    bytstatus:"洽谈中",
    status: 0,//--状态
    message: "",//--纪录事项
    openseapool:0,//是否公海池 0否；1是
    annex:[],//--附件
  };
  componentWillMount() {

    this.refreshData(this.props.data);
  }
  componentDidMount() {
    　　this.props.onRef(this);
  }
refreshData(data) {
    this.setState({
        id: data.id,//
        userid: data.userid,//--操作员ID
        bill_date: moment(data.bill_date),//--申请日期
        code: data.code,//----编号
        name: data.name,//--名称
        major:data.major,//毕业专业
        area:data.area,//地区
        mobile:data.mobile,//手机号
        bytstatus:data.bytstatus,
        status: data.status,//--状态
        message: data.message,//--纪录事项
        openseapool:0,//是否公海池 0否；1是
        annex:[],//--附件
        loading: false,
    });
    if(data.code===""){
        let params = {
        tblname: "employeechange",
        bill_date: moment(),
        type: 0,
        tblfield: "code",
        }
        this.getcode(params);
    }
    Attaches.get({sourceid:data.id,type:"employeechange" }).then(data => {
        this.setState({
        annex: data.annex,
        });
    }).catch(error => {
            this.setState({
            annex:[],//--附件
            });
    });
};
  getcode= (params) => {
    if(!this.props.isnew){
        this.setState({
        bill_date: params.bill_date,
        });
        return;
    }
    Enums.getcode(params).then(data => {
        this.setState({
        code: data[0].code,
        bill_date: params.bill_date,
        });
   }).catch(error => {
        notification.error(error.message, error.detailedMessage);
     });
 };
 bill_dateonchange = (value) => {
   let params = {
     tblname: "employeechange",
     bill_date: value,
     type: 0,
     tblfield: "code",
   }
   this.getcode(params);
 };

  fieldedit(field){
    if(!this.props.isedit){
      return true;
    }
    if(this.props.colcontrol){
      if(this.props.allow_col.indexOf(field)>=0){
        return false;
      }else{
        return true;
      }
    }else{
      return false;
    }
  }
  handleRemove(file){
    let filename=file.url;
    Uploads.removefile({filename: filename}).then(data => {
         if(data.code==="sucess"){
            notification.success(data.msg);
         }
         else{
          notification.error(data.msg);
          }
        }).catch(error => {
          notification.error(get(error, "response.data.message", "删除失败."));
        });
  };
   handledown(file){
     let  filename=file.url;
     let names=file.name;
     if(names.split('.')[1]!==filename.split('.')[1]){
      filename=filename.split('.')[0] +'.'+names.split('.')[1];
     }
     let AjaxUrl = 'api/upload/downloadfile';
     fetch(AjaxUrl ,{
      method: 'POST',
      body: window.JSON.stringify({filename: filename}),
      credentials: 'include',
      headers: new Headers({
        'Content-Type': 'application/json'
      })}).then((response) => {
      response.blob().then(blob => {
        const aLink = document.createElement('a');
        document.documentElement.appendChild(aLink);
        aLink.style.display='none';
        const objectUrl = window.URL.createObjectURL(blob);
        aLink.href = objectUrl;
        aLink.download = file.name;
        aLink.click();
        document.documentElement.removeChild(aLink);
      });
    }).catch((error) => {
      window.console.log(error);
    });
  };
   getPdfURL(){
        const _this = this;
        const props = {
            name: 'file',
            action: 'api/upload/uploadfile',
            headers: {
                authorization: 'authorization-text',
            },
         //  onChange: this.handleChange,
         onChange(info) {
                let fileList = [...info.fileList];

                // 1. Limit the number of uploaded files
                // Only to show two recent uploaded files, and old ones will be replaced by the new
                // fileList = fileList.slice(-2);
                // 2. Read from response and show file link
            var newd=[];
            fileList.forEach(file => {
                  if (file.response) {
                    // Component will show file.url as link
                    file.url = file.response.filename;
                  }
                  let status = _this.state.status;
                  if(file.bytstatus>=0){
                    status=file.bytstatus;
                  }
             // if(file.status==="done") {
                 const b=[{
                          uid: file.uid,
                          name: file.name,
                          status: file.status,
                          bytstatus: status,
                          url: file.url
                  }];
                if (newd.length < 1) {
                  newd = b;
                } else {
                  newd.push.apply(newd, b);
                }
             // }
                });
                _this.setState({ annex:newd });
              },
           onDownload: this.handledown,
           onRemove: this.handleRemove,
            showUploadList: {
            showDownloadIcon: true,
            downloadIcon: '下载',
            showRemoveIcon: true,
            removeIcon: <StarOutlined onClick={e => window.console.log(e, 'custom removeIcon event')} />,
          },
        };
        return props;
    };
    componentWillUnmount() {
      // const data=
      //   {
      //     id: this.state.id,//
      //     userid: this.state.userid,//--操作员ID
      //     bill_date: this.state.bill_date,//--申请日期
      //     code: this.state.code,//----编号
      //     name: this.state.name,//--名称
      //     major:this.state.major,//毕业专业
      //     area:this.state.area,//地区
      //     mobile:this.state.mobile,//手机号
      //     bytstatus:this.state.bytstatus,
      //     status: this.state.status,//--状态
      //     message: this.state.message,
      //     openseapool: this.state.message,
      //     annex: this.state.annex,

      //   }
    }
  render() {
    if (this.state.loading) return null;
    return(
      <div>
      <Form layout="horizontal" {...{labelCol: { span: 4 }, wrapperCol: { span: 14 },} }>
        {/* <Row>
          <Col span={10}>
                    <Form.Item style={{ marginBottom: 5 }} label="日期">
                    <DatePicker
                    locale={locale}
                    style={{ width:  400 }}
                    value={this.state.bill_date}
                    onChange={this.bill_dateonchange}
                    placeholder="日期"
                    disabled ={this.fieldedit("bill_date")}
                    autoFocus
                    />
                    </Form.Item>
                </Col>
          <Col span={10}>
                    <Form.Item style={{ marginBottom: 5 }} label="状态">
                    <Input
                        value={this.state.status===0 ? "草稿":(this.state.status===1 ? "审核中":"已审核")}
                        style={{ width:  400 }}
                        placeholder="状态"
                        disabled="disabled"
                    />
                    </Form.Item>
          </Col>
        </Row> */}
      <Row style={{ marginBottom: 5}}>
        <Col span={3}><div  style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
          <span style={{color:'#f81d22',fontSize:12}}>*</span>编码:</div></Col>
				  <Col span={7}>
          <Input
                    value={this.state.code}
                    style={{ width:  "100%" }}
                    onChange={e => this.setState({code:e.target.value})}
                    placeholder="编码"
                    disabled ={this.fieldedit("code")}
                    autoFocus
                />
          </Col>
          <Col span={3}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
            <span style={{color:'#f81d22',fontSize:12}}>*</span>名称:</div></Col>
				  <Col span={7}>
            <Input
                      value={this.state.name}
                      style={{ width:  "100%" }}
                      onChange={e => this.setState({name:e.target.value})}
                  disabled ={this.fieldedit("name")}
                      placeholder="名称"
                  />
				  </Col>
        </Row>
        <Row style={{ marginBottom: 5}}>
        <Col span={3}><div  style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
          <span style={{color:'#f81d22',fontSize:12}}>*</span>毕业专业:</div></Col>
        <Col span={7}>
              <Select style={{ width:  "100%" }}
                    showSearch
                    mode="multiple"
                    allowClear
                    disabled ={this.fieldedit("major")}
                    optionFilterProp="children"
                      value={this.state.major}
                      onChange={value => this.setState({major:value})} >
              {(this.props.employeemajordata || []).map(item => (
                <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
              ))}
              </Select>
				  </Col>
          <Col span={3}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
            <span style={{color:'#f81d22',fontSize:12}}>*</span>地区:</div></Col>
				  <Col span={7}>
             <Input
                    value={this.state.area}
                    style={{ width:  "100%" }}
                    onChange={e => this.setState({area:e.target.value})}
                disabled ={this.fieldedit("area")}
                    placeholder="地区"
                />
				  </Col>
        </Row>
        <Row style={{ marginBottom: 5}}>
          <Col span={3}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
            <span style={{color:'#f81d22',fontSize:12}}>*</span>手机号:</div></Col>
				  <Col span={7}>
            <Input
                    value={this.state.mobile}
                    style={{ width:  "100%" }}
                    onChange={e => this.setState({mobile:e.target.value})}
                    placeholder="手机号"
                    disabled ={this.fieldedit("mobile")}
                    autoFocus
                />
				  </Col>
          <Col span={3}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
            <span style={{color:'#f81d22',fontSize:12}}>*</span>状态:</div></Col>
				  <Col span={7}>
            <Select style={{ width:  "100%" }}
                      showSearch
                      disabled ={this.fieldedit("bytstatus")}
                      optionFilterProp="children"
                        value={this.state.bytstatus}
                        onChange={value => this.setState({bytstatus:value})} >
                {(this.props.employeestatusdata || []).map(item => (
                  <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>
                ))}
              </Select>
				  </Col>
        </Row>
        <Row style={{ marginBottom: 5}}>
        <Col span={3}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
          备注:</div></Col>
			    <Col span={7}>
                <textarea
                    rows="5" cols="60"
                    textalignvertical="top"
                    height="100px"
                    value={this.state.message}
                    onChange={e => this.setState({message:e.target.value})}
                    placeholder="备注"
                    disabled ={this.fieldedit("message")}
                />
			    </Col>
          <Col span={3}><div style={{marginTop:"5px",textAlign:"right", marginRight:"10px"}}>
            附件:</div></Col>
		      <Col span={7}>
                <Upload {...this.getPdfURL()} fileList={this.state.annex} 
                disabled ={this.fieldedit("annex")}>
                    <Button>
                    <UploadOutlined /> 上传
                    </Button>
                </Upload>
			    </Col>
        </Row>
      </Form>
      </div>
    );
  };
}
